<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- stop修饰符，阻止冒泡事件向上传递 -->
			<div class="btnParent" @click="clickParent">
				<button @click.stop="clickEvent">按钮</button>
			</div>
			
			<form action="" method="post">
				<!-- 绑定输入框回车事件 -->
				<input type="text" @keydown.enter.f1="searchWeather" name="username" v-model="city" id="" value="" />
				<!-- 阻止默认事件 -->
				<input @click.prevent="searchWeather" type="submit" value="提交"/>
			</form>
			<div id="weather">
				<h1>{{tmp}}</h1>
				<h3>{{brief}}</h3>
			</div>
			
			<h1>只触发一次修饰符</h1>
			
			<button type="button" @click.once='onceEvent'>只触发一次按钮</button>
			
			
			<button type="button" @click.ctrl.exact="ctrlEvent">按住ctrl事件</button>
		</div>
		
		<script type="text/javascript">
			// 配置按键的自定义修饰符
			Vue.config.keyCodes.f1 = 112
			var app = new Vue({
				el:"#app",
				data:{
					count:0,
					city:"广州",
					tmp:"",
					brief:""
				},
				methods:{
					clickEvent:function(event){
						console.log("clickEvent")
					},
					clickParent:function(){
						console.log("clickParent")
					},
					searchWeather:async function(){
						console.log("查询天气")
						console.log(this.city)
						let httpUrl = `https://free-api.heweather.net/s6/weather/now?location=${this.city}&key=3c497450d8e44c5280421ceaba1db581`
						let res = await fetch(httpUrl)
						let result = await res.json()
						console.log(result)
						let now = result.HeWeather6[0].now;
						this.tmp = now.tmp;
						this.brief = now.cond_txt;
					},
					onceEvent:function(){
						console.log('只触发一次')
					},
					ctrlEvent:function(){
						console.log('ctrlEvent')
					}
				}
			})
		</script>
	</body>
</html>
